<script type="text/javascript">
	$(function(){
		$("#adduser_btn").click(function(){
			$(".adduser").css("display","block");
			$("#all").css("display","block");
		});
		//初始化页面
		load();
		
		//分类查询
		$(".divide-btn").click(function(){
			load($(this).val());
		});
		
		//用户名查询
		$("#select-phone").click(function(){
			var name = $("#user-name").val();
			select(name);
		});
		
		//添加号码
		//添加任务
		$("#phoneform").submit(function(){
			$.post("addPhone",$(this).serialize(),function(data){
				if(data.flag){
					alert("添加成功");
				}else{
					alert("添加失败");
				}
			});
		});
		
		
		
	});
	
	//初始化页面
	function load(divide){
		$.post("phone",{divide:divide},function(data){
			var ph = '';
			for(var i =0;i<data.length;i++){
				var ph1 = '<tr>'+
				      		'<td>'+data[i].name+'</td>'+
				     		'<td>'+data[i].phone+'</td>'+
				      		'<td>'+data[i].pro+'</td>'+
					  		'<td>'+data[i].tri+'</td>'+
					  		'<td><a href="javascript:Tphone('+data[i].id+')"><button type="button" class="btn btn-warning btn-xs">删除</button></a></td>'+
				   		  '</tr>'
				   		  ph+=ph1;
			}
			$(".tphone").html(ph);
		});
	}
	
	//用户名查询
	function select(name){
		$.post("selectPhone",{name:name},function(data){
			var ph = '';
			for(var i =0;i<data.length;i++){
				var ph1 = '<tr>'+
				      		'<td>'+data[i].name+'</td>'+
				     		'<td>'+data[i].phone+'</td>'+
				      		'<td>'+data[i].pro+'</td>'+
					  		'<td>'+data[i].tri+'</td>'+
					  		'<td><a href="javascript:Tphone('+data[i].id+')"><button type="button" class="btn btn-warning btn-xs">删除</button></a></td>'+
				   		  '</tr>'
				   		  ph+=ph1;
			}
			$(".tphone").html(ph);
		});
	}
	
	//添加联系单
	function Tphone(id){
		$.post("deletPhone",{id:id},function(data){
			if(data.flag){
				alert("删除成功");
				load();
			}else{
				alert("删除失败");
				load();
			}
		});
		
	}
</script>
<div class="phone">
	<h3>工作联系单</h3>
	<!--菜单栏-->
	<div class="col-lg-9">
		<button type="button" class="btn btn-primary" id="adduser_btn">新增</button>
		<button type="button" class="btn btn-success divide-btn" value="监理">监理</button>
		<button type="button" class="btn btn-success divide-btn" value="业主">业主</button>
		<button type="button" class="btn btn-success divide-btn" value="施工单位">施工单位</button>
	</div>
	<div class="col-lg-3">
		<div class="input-group">
			<input type="text" class="form-control" id="user-name"
				placeholder="用户名"> <span class="input-group-btn">
				<button class="btn btn-default" id="select-phone" type="button">查询</button>
			</span>
		</div>
	</div>
</div>

<!--添加用户表单-->
<div class="adduser">
	<h3>请填写用户信息</h3>
	<form id="phoneform">
		<div class="form-group">
			<label for="exampleInputEmail1">用户名</label> <input type="text"
				class="form-control" name="name" placeholder="用户名">
		</div>
		<div class="form-group">
			<label for="exampleInputEmail1">电话号码</label> <input type="text"
				class="form-control" name="phone" placeholder="电话号码">
		</div>
		<div class="form-group">
			<label for="exampleInputEmail1">职称</label> <input type="text"
				class="form-control" name="pro" placeholder="职称">
		</div>
		<div class="form-group" style="padding-left: 50px;">
			<input type="radio" name="tri" value="监理"> <label
				for="exampleInputPassword1">监理</label> <input type="radio"
				name="tri" value="业主"> <label for="exampleInputPassword1">业主</label>
			<input type="radio" name="tri" value="施工单位"> <label
				for="exampleInputPassword1">施工单位</label>
		</div>
		<button type="submit" class="btn btn-default">提交</button>
	</form>

</div>
<div id="all"></div>

<!--列表栏-->
<table class="table table-striped" style="margin-bottom: 0px;">
	<caption>用户列表</caption>
	<thead>
		<tr>
			<th>用户名</th>
			<th>电话号码</th>
			<th>职称</th>
			<th>所属单位</th>
		</tr>
	</thead>
	<tbody class="tphone">

	</tbody>
</table>
<!--分页-->
<div class="fenye" style="margin-bottom: 0px; text-align: center;">
	<nav aria-label="Page navigation">
		<ul class="pagination">
			<li><a href="#" aria-label="Previous"> <span
					aria-hidden="true">&laquo;</span>
			</a></li>
			<li><a href="#">1</a></li>
			<li><a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span>
			</a></li>
		</ul>
	</nav>
</div>
</div>
